<script setup lang="tsx">
/**
 * @name ShiftUnit
 * @description 班次单元设置
 */
import {
  Delete,
  Edit,
  View,
} from '@element-plus/icons-vue'
import type { Action } from 'element-plus'
import {
  FormModal,
  SearchForm,
  ViewModal,
} from './components'
import {
  defaultPagingParams,
  resetFormData,
} from './index'
import type {
  SchedulingShiftUnitInfo,
  TableColumn,
} from '@/types'
import {
  deleteShiftUnitById,
  selectShiftUnitList,
} from '@/api/modules/scheduling'
// ------------------use------------------
// #region
const { form } = useKeepPageStore()
form('/shift-scheduling-scheme')
const { globalProperties, $confirm, $message }
  = useCurrentInstance()
const { withLoading, loading } = useDefineLoading()
const [tableData, setTableData] = useState<
  SchedulingShiftUnitInfo[]
>([])
const [formData, setFormData] = useState({
  ...resetFormData(),
})
const [formModalTitle, setFormModalTitle]
  = useState<string>('')
const [unitId, setUnitId] = useState(0)
const [unitShiftData, setUnitShiftData] = useState<any[]>(
  [],
)
// #endregion
// ------------------静态变量------------------
// #region
const columns: TableColumn<SchedulingShiftUnitInfo>[] = [
  {
    key: uuid(),
    type: 'index',
    width: '80',
    label: '序号',
  },
  {
    key: uuid(),
    label: '班次单元名称',
    render({ row }) {
      return row.shiftUnit.name
    },
  },
  {
    key: uuid(),
    label: '班次',
    render({ row }) {
      return (
        <div class="flex-direction min-width-max-content flex align-start">
          {(row.shiftList ?? []).map(item => (
            <p class="!margin-0">
              {item.startTime}
              {' '}
              -
              {item.endTime}
              {' '}
              {item.name}
              {' '}
              {!!item.overnightShift && '(跨天)'}
            </p>
          ))}
        </div>
      )
    },
  },
  {
    key: uuid(),
    label: '创建时间',
    render({ row }) {
      return row.shiftUnit.creationTime
    },
  },
  {
    key: uuid(),
    label: '创建人',
    render({ row }) {
      return row.shiftUnit.creationUserName
    },
  },
  {
    key: uuid(),
    label: '修改时间',
    render({ row }) {
      return row.shiftUnit.updateTime
    },
  },
  {
    key: uuid(),
    label: '修改人',
    render({ row }) {
      return row.shiftUnit.updateUserName
    },
  },
]
// #endregion
// ------------------动态变量------------------
// #region

// #endregion
// ------------------ref-----------
// #region
const modalRef = ref<InstanceType<typeof FormModal>>()
const viewModalRef = ref<InstanceType<typeof ViewModal>>()
const pagingParams = ref({
  ...defaultPagingParams,
})
// #endregion
// ------------------reactive------
// #region

// #endregion
// ------------------computed------
// #region
// #endregion
// ------------------生命周期------------------
// #region
onMounted(() => {
  getTableData()
})
// #endregion
// ------------------内置方法---------------------
// #region

// #endregion
// ------------------方法---------------------
// #region
function showViewModal(data: any[]) {
  viewModalRef.value?.open()
  setUnitShiftData(data)
}
async function deleteData(id: number) {
  const res: Action = await $confirm(
    '该操作将永久删除该数据，确定删除？',
    '警告',
    {
      type: 'warning',
    },
  ).catch(e => e)

  if (res !== 'confirm')
    return
  await deleteShiftUnitById(id)

  globalProperties.$message.success('删除成功！')
  getTableData()
}
async function showEditDialog(row: any) {
  modalRef.value?.open()
  await nextTick()
  setFormModalTitle('编辑')
  setFormData({ ...resetFormData(), ...row })
}
async function showAddDialog() {
  modalRef.value?.open()
  await nextTick()
  setFormModalTitle('新增')
  setFormData({ ...resetFormData() })
}
async function getTableData() {
  const { data: res } = await withLoading(
    selectShiftUnitList,
  )(pagingParams.value)
  setTableData(res)
}
function success() {
  getTableData()
  modalRef.value?.close()
  $message.success('保存成功！')
}
// #endregion
</script>

<template>
  <div
    class="padding-sm flex-direction flex align-end container"
  >
    <view-table
      :loading="loading"
      :columns="columns"
      :data="tableData"
      :show-download="false"
    >
      <template #actions>
        <SearchForm
          v-model="pagingParams"
          @search="getTableData"
          @reset="getTableData"
          @plus="showAddDialog"
        />
      </template>
      <template #operate="{ row }">
        <TdButton
          v-if="row.shiftUnit.isBinding === 1"
          title="查看"
          :icon="View"
          type="primary"
          @click="showViewModal(row.shiftList)"
        />
        <TdButton
          v-else
          title="编辑"
          :icon="Edit"
          type="primary"
          @click="showEditDialog(row)"
        />
        <TdButton
          title="删除"
          :icon="Delete"
          type="danger"
          @click="deleteData(row.shiftUnit.id)"
        />
      </template>
    </view-table>

    <FormModal
      ref="modalRef"
      v-model:data="formData"
      :title="formModalTitle"
      @success="success"
    />
    <ViewModal
      ref="viewModalRef"
      :unit-shift-data="unitShiftData"
    />
  </div>
</template>

<style lang="scss" scoped>
//------------------组件样式------------------
//-------------样式穿透-------------
</style>
